/*
  芝麻信用仪表盘demo
  Autho:devstone
  Email:kevinlq0912@163.com
  QQ:2313828706
*/
import QtQuick 2.0
import "../util/MathUtil.js" as MathUtil

Item {
    id: zhimaRoot
    width: parent.width
    height: parent.height

    property var m_radius: Math.min(parent.width,parent.height)*0.36
    property var m_perAngle: (360 - 50*2)/5;//52
    property var m_curScore: 712;
    property var m_dotSpeed: 0.03
    property var m_stage: ["较差","中等","良好","优秀","极好"];
    //评估时间
    property var m_evatTme: "2018-02-03"


    function update(value)
    {
        m_curScore = value;
        canvas.requestPaint();
    }

    Canvas
    {
        id: canvas
        width: parent.width
        height: parent.height

        //刻度字体大小
        property var m_pointSize: m_radius*0.10;

        onPaint:
        {
            var ctx = getContext("2d");
            var width = canvas.width
            var height = canvas.height
            ctx.clearRect(0,0,width,height);

            ctx.fillStyle = 'rgba(10,146,245,0.9)';
            ctx.fillRect(0,0,width,height);
            ctx.fill();


            ctx.save();
            //将原点移到中心点,方便绘制
            ctx.translate(width/2,height/2);

            drawPanel(ctx);

            ctx.restore();
        }

        function drawPanel(ctx)
        {
            //绘制刻度
            drawScal(ctx);

            //绘制分数
            drawGrade(ctx);

            //绘制信用阶段以及评估时间
            drawAssessText(ctx,m_curScore);

            //文字
            drawText(ctx,m_curScore);

            //绘制最外层轨道
            drawPathway(ctx);
        }

        //绘制最外层轨道
        function drawPathway(ctx)
        {
            //最外层轨道
            ctx.save();
            ctx.rotate(MathUtil.getRadian(140));
            ctx.strokeStyle ='rgba(255,255,255,0.3)';
            ctx.lineWidth = 4;
            ctx.arc(0,0,m_radius*1.14,0,MathUtil.getRadian(m_perAngle*5),false);
            ctx.stroke();

            //计算当前分数所在的角度
            var angle = (m_curScore - 400 )/(100/m_perAngle);
            var point = MathUtil.getCircleCoordinate(m_radius*1.14,0,0,angle);

            //先绘制轨道进度
            ctx.beginPath();
            ctx.strokeStyle ='rgba(255,255,255,0.5)';
            ctx.arc(0,0,m_radius*1.14,0,MathUtil.getRadian(angle),false);
            ctx.stroke();
            //绘制圆球
            drawDot(ctx,point[0],point[1]);


            ctx.restore();
        }

        //绘制刻度
        function drawScal(ctx)
        {
            //绘制半透明刻度
            ctx.save();
            ctx.beginPath();
            ctx.rotate(MathUtil.getRadian(140));
            ctx.strokeStyle = 'rgba(255,255,255,0.2)'
            ctx.lineWidth = m_radius*0.08;
            ctx.arc(0,0,m_radius,0,MathUtil.getRadian(m_perAngle*5),false);
            ctx.stroke();
            ctx.restore();
            //获取刻度线坐标
            var point1 = MathUtil.getCircleCoordinate(m_radius*1.04,0,0,140);
            var point2 = MathUtil.getCircleCoordinate(m_radius*0.96,0,0,140);

            //绘制6条大刻度线
            ctx.save();
            for ( var i = 0; i < 6; i++)
            {
                ctx.beginPath();
                ctx.lineWidth = 4;
                ctx.strokeStyle = 'rgba(255,255,255,0.8)';
                ctx.moveTo(point1[0],point1[1]);
                ctx.lineTo(point2[0],point2[1]);
                ctx.stroke();
                ctx.rotate(MathUtil.getRadian(m_perAngle));
            }
            ctx.restore();

            //绘制小刻度(将大刻度细分为5个小刻度)
            ctx.save();
            //获取刻度线坐标
            var point3 = MathUtil.getCircleCoordinate(m_radius*1.04,0,0,140);
            var point4 = MathUtil.getCircleCoordinate(m_radius*0.97,0,0,140);
            for (var j = 0; j < 25; j++)
            {
                if ( j%5 != 0)
                {
                    ctx.beginPath();
                    ctx.lineWidth = 2;
                    ctx.strokeStyle = 'rgba(255,255,255,0.5)';
                    ctx.moveTo(point3[0],point3[1]);
                    ctx.lineTo(point4[0],point4[1]);
                    ctx.stroke();
                }
                ctx.rotate(MathUtil.getRadian(m_perAngle/5));
            }

            ctx.restore();
        }

        //绘制分数
        function drawGrade(ctx)
        {
            var stAngle = 140;
            ctx.fillStyle = 'rgba(255,255,255,0.9)';
            for ( var i = 0; i < 6; i++)
            {
                var endAngle = stAngle + m_perAngle;
                var num = 400 + 100 * i;
                drawSectorCircleText(ctx,num.toString(),true,m_radius*0.88,stAngle,stAngle,"left");
                if ( i < 5 )
                {
                    drawSectorCircleText(ctx,m_stage[i],false,m_radius*0.88,stAngle,endAngle,"center");
                }
                stAngle += m_perAngle;
            }
        }

        //绘制信用阶段以及评估时间
        function drawAssessText(ctx,score)
        {
            ctx.fillStyle = "#FFFFFF";
            ctx.font = m_pointSize*1.3+"px Arial";
            ctx.textAlign = "center";
            var dis = m_radius*0.4;

            if ( m_curScore < 500 )
            {
                ctx.fillText("信用较差",0,dis);
            }else if ( m_curScore < 600 && m_curScore >= 500)
            {
                ctx.fillText("信用中等",0,dis);
            }else if ( m_curScore < 700 && m_curScore >= 600)
            {
                ctx.fillText("信用良好",0,dis);
            }else if ( m_curScore < 800 &&m_curScore >= 700)
            {
                ctx.fillText("信用优秀",0,dis);
            }else if ( m_curScore <= 900 && m_curScore >=800)
            {
                ctx.fillText("信用极好",0,dis);
            }

            //评估时间
            dis = m_radius*0.52;
            ctx.fillStyle = 'rgba(255,255,255,1)';
            ctx.font = m_radius*0.07+"px Arial";
            var evaText = "评估时间: "+m_evatTme;
            ctx.fillText(evaText,0,dis);

             ctx.fillStyle = 'rgba(126,197,249,0.8)';
            ctx.beginPath();
            ctx.font = m_radius*0.07+"px Arial";
            ctx.fillText("BETA",0,-dis);
        }

        function drawDot(ctx,x,y)
        {
            ctx.beginPath();
            ctx.fillStyle = 'rgba(255,255,255,0.7)';
            ctx.arc(x,y,5,0,Math.PI*2,false);
            ctx.fill();
        }

        //绘制动态文字
        function drawText(ctx,process)
        {
            ctx.save();
            ctx.fillStyle = 'rgba(0,0,0,1)';
            ctx.font = m_pointSize*5.6+"px Arial";
            ctx.textAlign = "center";
            ctx.textBaseLine = "top";
            ctx.fillText(process,0,10);
            ctx.restore();
        }

        /*
            function:绘制扇形圆形文字
            文字可以随着扇形进行环绕
            ctx:
            strText: 需要绘制的字符
            bNum: 该字符是否是数字(因为汉字和数字间距不同)
            startAngle/endAngle:起始角度
            TextAlign: 方向
        */
        function drawSectorCircleText(ctx,strText,bNum,radius,startAngle,endAngle,TextAlign)
        {
            var index = 0;
            //计算每一个字符占的角度值
            //            var angleDecrement = (endAngle - startAngle)/(strText.length);
            //下面是设置字符间距，汉字和数字间距不同
            var angleDecrement = bNum == true?5:10;
            var angleHalf = (endAngle - startAngle)/2;
            var angle = startAngle +(angleHalf - (strText.length - 1)/2*angleDecrement);
            ctx.save();
            ctx.fillStyle= 'rgba(255,255,255,0.8)';
            ctx.font = m_pointSize+"px Arial";
            ctx.textAlign = TextAlign;
            ctx.textBaseline = "middle";
            while (index < strText.length)
            {
                var character = strText.charAt(index);
                ctx.save();
                ctx.beginPath();
                ctx.translate(Math.cos(MathUtil.getRadian(angle))*radius,
                              Math.sin(MathUtil.getRadian(angle))*radius);
                ctx.rotate(MathUtil.getRadian(90 + angle));
                ctx.fillText(character,0,0);
                ctx.closePath();
                angle += angleDecrement;
                index++;
                ctx.restore();
            }
            ctx.restore();
        }
    }
}
